<template>
  <div style="padding-bottom: 10px">
    <el-table v-loading="listLoading" :data="PaymentList" show-summary>
      <el-table-column
        align="center"
        label="ID"
        prop="PaymentID"
        show-overflow-tooltip
        width="70"
      />
      <el-table-column align="center" label="款项类型" width="80">
        <template #default="{ row }">
          <el-text>{{ row.PaymentClassName }}</el-text>
        </template>
      </el-table-column>
      <el-table-column align="center" label="收款日期" width="120">
        <template #default="{ row }">
          <el-text>{{ row.PaymentDate }}</el-text>
        </template>
      </el-table-column>
      <el-table-column align="center" label="收款方式" width="80">
        <template #default="{ row }">
          <el-text>{{ row.PaymentTypeName }}</el-text>
        </template>
      </el-table-column>
      <el-table-column align="center" label="收款公司">
        <template #default="{ row }">
          <el-text>{{ row.PaymentCompany }}</el-text>
        </template>
      </el-table-column>
      <el-table-column align="center" label="收款账户">
        <template #default="{ row }">
          <el-text>{{ row.PaymentAccount }}</el-text>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="PaymentMoney"
        label="到账金额"
        width="100"
      />
      <el-table-column
        align="center"
        prop="HesuanMoney"
        label="业绩核算金额"
        width="120"
      />
      <el-table-column
        align="center"
        prop="HesuanOrderCount"
        label="业绩核算单量"
        width="120"
      />
      <el-table-column
        v-if="OrderFlowState === 1"
        align="center"
        label="操作"
        width="180"
      >
        <template #default="{ row }">
          <el-button type="success" size="small" @click="productEdit(row)">
            修改
          </el-button>
          <el-button type="danger" size="small" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <vab-query-form v-if="OrderFlowState === 1" style="padding: 10px">
    <vab-query-form-right-panel :span="22">
      <el-form ref="formRef" :model="PaymentForm">
        <el-space>
          <el-form-item label="款项类型">
            <el-select
              v-model="PaymentForm.PaymentClass"
              placeholder=""
              style="width: 150px"
            >
              <el-option
                v-for="(item, index) in PaymentOptions.PaymentClass"
                :key="index"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="到账日期">
            <el-date-picker
              v-model="PaymentForm.PaymentDate"
              type="date"
              placeholder="到账日期"
            />
          </el-form-item>
          <el-form-item label="">
            <el-select
              v-model="PaymentForm.PaymentType"
              placeholder="请选择收款方式"
              style="width: 150px"
            >
              <el-option
                v-for="(item, index) in PaymentOptions.PaymentTypes"
                :key="index"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="选择收款公司">
            <el-select
              v-model="PaymentForm.PaymentCompany"
              placeholder="请选择收款公司"
              style="width: 250px"
            >
              <el-option
                v-for="(item, index) in PaymentOptions.PaymentCompanys"
                :key="index"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="选择收款账户">
            <el-select
              v-model="PaymentForm.PaymentAccount"
              placeholder="选择收款账户"
              style="width: 150px"
            >
              <el-option :value="1" label="现金" />
              <el-option :value="2" label="保定银行(25354235)" />
              <el-option :value="3" label="工商银行(90852904)" />
            </el-select>
          </el-form-item> -->
        </el-space>
        <el-space>
          <el-form-item label="到账金额">
            <el-input v-model="PaymentForm.PaymentMoney" />
          </el-form-item>
          <el-form-item label="业绩核算金额">
            <el-input v-model="PaymentForm.HesuanMoney" />
          </el-form-item>
          <el-form-item label="业绩核算单量">
            <el-input v-model="PaymentForm.HesuanOrderCount" />
          </el-form-item>
        </el-space>
        <el-space>
          <el-form-item label="特殊备注">
            <el-input v-model="PaymentForm.PaymentMemo" style="width: 300px" />
          </el-form-item>
          <el-form-item label="附件">
            <!-- <el-input type="file" /> -->
          </el-form-item>
          <el-form-item>
            <el-button :icon="Search" type="primary" @click="savePayment">
              确认添加
            </el-button>
          </el-form-item>
        </el-space>
      </el-form>
    </vab-query-form-right-panel>
  </vab-query-form>
</template>

<script>
  import { getPaymentOptions } from '@/api/common'
  import { savePayments } from '@/api/businessOrderCreate'

  export default defineComponent({
    name: 'PaymentList',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      // const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        OrderID: 0,
        OrderFlowState: 1,
        listLoading: false,
        PaymentOptions: {
          PaymentClass: [],
          PaymentTypes: [],
          PaymentCompanys: [],
        },
        formRef: null,
        editRef: null,
        PaymentList: [],
        PaymentForm: {
          OrderID: 0,
          PaymentClass: 1,
        },
        title: '',
      })
      const showList = (OrderInfo, list) => {
        state.OrderID = OrderInfo.OrderID
        state.OrderFlowState = Math.abs(OrderInfo.OrderFlowState)
        state.PaymentForm.OrderID = OrderInfo.OrderID
        state.PaymentList = list
      }

      // const PaymentDelete = (row) => {
      //   console.log(row)
      //   if (row.OrderListID) {
      //     $baseConfirm('你确定要删除当前项吗', null, async () => {
      //       const { msg } = await deletePayment({
      //         OrderListID: row.OrderListID,
      //       })
      //       $baseMessage(msg, 'success', 'vab-hey-message-success')
      //       emit('fetch-data')
      //     })
      //   }
      // }
      const savePayment = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            const { msg } = await savePayments(state.PaymentForm)
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            state.PaymentForm = {
              OrderID: 0,
            }
            emit('fetch-data')
          }
        })
      }
      const getOptions = async () => {
        state.listLoading = true

        const {
          data: { PaymentClass, PaymentTypes, PaymentCompanys },
        } = await getPaymentOptions()
        state.PaymentOptions.PaymentClass = PaymentClass
        state.PaymentOptions.PaymentTypes = PaymentTypes
        state.PaymentOptions.PaymentCompanys = PaymentCompanys
        state.listLoading = false
      }

      onMounted(() => {
        getOptions()
      })

      return {
        ...toRefs(state),
        showList,
        savePayment,
        // // giftEdit,
        // giftDelete,
      }
    },
  })
</script>
